<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(swiper, index) in swipers" :key="index">
        <img v-lazy="swiper.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="grid in grids"
        :key="grid.id"
        :icon="grid.src"
        :text="grid.title"
      >
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swipers: [],
      grids: []
    }
  },
  async created () {
    this.getLunbo()
    this.getGrids()
  },
  methods: {
    async getLunbo () {
      const res = await this.$http.getLunbo()
      this.swipers = res.data.message
    },

    async getGrids () {
      const res = await this.$http.getGrids()
      this.grids = res.data.message
      console.log(this.grids)
    }
  }
}
</script>
<style lang="scss" scoped>
.my-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.van-grid-item__icon {
    font-size: 60px;
  }
</style>
